<template>
  <div class="yy-page yy-system-depart">
    <div class="yy-page-header">
      <div class="yy-page-header_title">{{ route.query?.itemName }}成员</div>
      <div class="yy-page-header_action">
        <el-button @click="getEmployeeList">刷新</el-button>
        <el-button color="#009688" @click="onOpenDialog()">编辑成员</el-button>
      </div>
    </div>
    <div class="yy-page-data">
      <WidgetTable  :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging"></WidgetTable>
    </div>
    <ItemMemberManageDialog ref="itemMemberManageDialogRef" @saveSuccess="onAddEmployeeSuccess"/>
  </div>

</template>

<script setup lang="ts">

import {computed, defineExpose, onBeforeMount, reactive, ref} from "vue";
import {TableColumn} from "@/model/Definition";
import {formatDate} from "@/utils/yayi";
import {ElMessage} from "element-plus";
import RegItemApi from "@/api/queue/RegItemApi";
import {useRoute} from "vue-router";
import {QueueItemEmplModel} from "@/model/QueueItemEmplModel";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import ItemMemberManageDialog from "@/views/queue/reg_item/ItemMemberManageDialog.vue";

const isVisible = ref(false)
const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: QueueItemEmplModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"index",
      "label":"序号",
      "type": "index",
      "showable":true,
      "align": 'center',
      "width": 60,
      "fixed": 'left'
    },
    {
      "field":"emplName",
      "label":"名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"emplCode",
      "label":"工号",
      "showable":true
    },
    {
      "field":"emplLevelName",
      "label":"职级",
      "showable":true
    },
    {
      "field":"categoryName",
      "label":"挂号类目",
      "showable":true
    },
    {
      "field":"price",
      "label":"挂号费",
      "showable":true
    },
    {
      "field":"action",
      "label":"操作",
      "width": 80,
      "showable":true,
      "sortable":false,
      "align": 'center',
      "fixed": 'right'
    }
  ],
  paging: {
    isPaging: false
  },
  data: [],
  formats: {
    'state': {
      textType:'text',
      typeFormat: QueueItemEmplModel.getStateType,
      labelFormat: QueueItemEmplModel.getStateLabel
    },
    'updateTime': {
      labelFormat:  (val) =>formatDate(val)
    },
    'action': {
      items: [
        {
          label: '移除',
          elType: 'button',
          value: 'delete',
          confirm: {
            title: '您确定要移除该成员吗？',
            atConfirm: (data: QueueItemEmplModel) => {
              RegItemApi.removeItemEmployee(data.id).then(() => {
                ElMessage.success({
                  message: '移除成员成功',
                  showClose: true,
                })
                const index = table.data.findIndex(item => item.id == data.id)
                table.data.splice(index, 1)
              })
            }
          }
        }
      ]
    }
  }
})

const itemMemberManageDialogRef = ref()
const route = useRoute()
const routeQuery = computed(() => {
  return route.query
})
const onOpenDialog = () => {
  itemMemberManageDialogRef.value.onShowDialog()
}

onBeforeMount(() => {
  getEmployeeList()
})

const getEmployeeList = () => {
  table.isLoading = true
  RegItemApi.listEmployeeByItem(route.query.itemId as string, route.query.deptId as string).then(data => {
    table.data = data
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onAddEmployeeSuccess = () => {
  getEmployeeList()
}



defineExpose({
  //
})
</script>
<style scoped lang="scss">

</style>